<template>
	<view class="content">
		<view class="header">
			<view class="left"></view>
			<!-- <view class="left" @click="menuShow = true">新建<u-icon name="plus-circle" size="44"></u-icon></view> -->
			<view class="center">商机概览</view>
			<view class="right"></view>
		</view>
		<view class="calendar">
			<qiun-data-charts type="funnel" :opts="opts" :chartData="chartData" />
		</view>
		<view class="calendar-box">
			<view class="item border-right">
				<view class="title sale" @click="clickTitle('1')">
					<span>私海商机</span>
					<span><u-icon name="arrow-right" size="40"></u-icon></span>
				</view>
				<view class="item-item" @click="clickTask(elem,'1')" v-for="(elem,i) of grsjList" :key="i">
					<view class="child-item-title">
						<view class="label">{{elem.cusName}}</view>
						<view class="icon" @click.stop="openMore(elem,'1')"><u-icon name="setting-fill" size="40"></u-icon>
						</view>
					</view>
					<view class="child-item-content">
						<view class="child-item-time">{{elem.biz1 ? elem.biz1.substring(0,10) : ""}}
						</view>
						<view
							:class="['child-item-progress',{'success' : elem.status === 'y'},{'ing': elem.status === 'o'}]">
							{{elem.statusName}}</view>
					</view>

				</view>
				<u-empty text="暂无事项" mode="" margin-top="-50" v-if="grsjList.length === 0"></u-empty>
			</view>
			<view class="item">
				<view class="title gz" @click="clickTitle('2')">
					<span>客户关怀</span>
					<span><u-icon name="arrow-right" size="40"></u-icon></span>
				</view>
				<view class="item-item" @click="clickTask(elem,'2')" v-for="(elem,i) of gzList" :key="i">
					<view class="child-item-title">
						<view class="label">{{elem.cusName}}</view>
						<view class="type">
							{{elem.careType}}
							<!-- <u-icon name="setting-fill" size="40"></u-icon> -->
						</view>
					</view>
					<view class="child-item-content">
						{{elem.createTime}}
						<!-- <view class="child-item-time">{{elem.createTime}}
						</view>
						<view
							:class="['child-item-progress']">
							{{elem.careType}}</view> -->
					</view>
				</view>
				<u-empty text="暂无事项" mode="" margin-top="-50" v-if="!gzList || gzList.length === 0"></u-empty>
			</view>
			<!-- <view class="item border-right">
				<view class="title xm" @click="clickTitle('3')"> 
					<span>公海商机</span>
					<span><u-icon name="arrow-right" size="40"></u-icon></span>
				</view>
				<view class="item-item" @click="clickTask(elem,'3')" v-for="(elem,i) of ghsjList" :key="i">
					<view class="child-item-title">
						<view>{{elem.cusName}}</view>
						<view class="icon" @click.stop="openMore(elem,'3')"><u-icon name="setting-fill" size="40"></u-icon>
						</view>
					</view>
					<view class="child-item-content">
						<view class="child-item-time">{{elem.biz1 ? elem.biz1.substring(0,10) : ""}}
						</view>
						<view
							:class="['child-item-progress',{'success' : elem.status === 'y'},{'ing': elem.status === 'o'}]">
							{{elem.statusName}}</view>
					</view>
				</view>
				<u-empty text="暂无事项" mode="" margin-top="-50" v-if="ghsjList.length === 0"></u-empty>
			</view> -->
			<view class="item border-right">
				<view class="title xm" @click="clickTitle('3')"> 
					<span>近期跟踪</span>
					<span><u-icon name="arrow-right" size="40"></u-icon></span>
				</view>
				<view class="item-item" @click="clickTask(elem,'2')" v-for="(elem,i) of jqghList" :key="i">
					<view class="child-item-title">
						<view class="label">{{elem.cusName}}</view>
						<view class="icon">
							{{elem.traceCount}}
							<!-- <u-icon name="setting-fill" size="40"></u-icon> -->
						</view>
					</view>
					<view class="child-item-content">
						{{elem.traceTime}}
						<!-- <view class="child-item-time">{{elem.createTime}}
						</view>
						<view
							:class="['child-item-progress']">
							{{elem.careType}}</view> -->
					</view>
				</view>
				<u-empty text="点击按钮查看详情" mode="" margin-top="-50" v-if="!jqghList || jqghList.length === 0"></u-empty>
			</view>
			<view class="item">
				<view class="title other" @click="clickTitle('4')">
					<span>业绩查询</span>
					<span><u-icon name="arrow-right" size="40"></u-icon></span>
				</view>
				<!-- <view class="item-item-two" @click="clickTask('','4')">
					<view class="child-item-content">
						<view class="child-item-time">商机数量：{{compPerf.crmBusiOppoList.length}}</view>
					</view>
					<view class="child-item-content">
						<view class="child-item-time">转化数量：{{compPerf.crmBaseCustInfos.length}}</view>
					</view>
					<view class="child-item-content">
						<view class="child-item-time">合同金额：{{compPerf.salesPerf.orderAmt}}</view>
					</view>
					<view class="child-item-content">
						<view :class="['child-item-progress','success']">销售金额：{{compPerf.salesPerf.sendAmt}}</view>
					</view>
				</view> -->
				<view class="item-item" @click="clickTask(elem,'4')" v-for="(elem,i) of compPerfList" :key="i">
					<view class="child-item-title">
						<view class="label">{{elem.empName}}</view>
						<view class="type">
							客户数:{{elem.cusNums}}
						</view>
					</view>
					<view class="child-item-content">
						<view class="left">订货额:{{elem.sumSaleAmt}}
						</view>
						<view class="right">订单数:{{elem.orderNum}}</view>
					</view>
				</view>
				<u-empty text="点击按钮查看详情" mode="" margin-top="-50" v-if="!compPerfList || compPerfList.length === 0"></u-empty>
			</view>
		</view>
		<u-select v-model="menuShow" :list="menuList" @confirm="selectConfirm"></u-select>
		<u-select v-model="moreShow" :list="moreList" @confirm="selectMoreConfirm"></u-select>
		<u-select v-model="personShow" :list="personList" @confirm="selectPersonConfirm"></u-select>
	</view>
</template>

<script>
	/*  */
	export default {
		data() {
			return {
				grsjList: [],
				gzList: [],
				ghsjList: [],
				yjList: [],
				jqghList: [],
				compPerfList: [],
				menuList: [{
						value: '新建事项',
						label: '新建事项'
					},
					{
						value: '下单',
						label: '下单'
					}
				],
				moreList: [{
						value: '前往拜访',
						label: '前往拜访'
					}
				],
				ctrlType: "",
				personList: [],
				menuShow: false,
				moreShow: false,
				personShow: false,
				taskInfo: null,
				searchDate: "",
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['funnel'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 60, 0, 60],
					enableScroll: false,
					extra: {
						funnel: {
							activeOpacity: 0.3,
							activeWidth: 10,
							border: true,
							borderWidth: 2,
							borderColor: "#FFFFFF",
							fillOpacity: 1,
							labelAlign: "right"
						}
					}
				},
				compPerf: {
					begDate: null,
					crmBaseCustInfos: [],
					crmBusiOppoList: [],
					crmCareTaskrs: [],
					endDate: null,
					manId: null,
					manName: null,
					salesPerf: {sendAmt: 0, orderAmt: 0}
				}
			}
		},
		onShow() {
			this.searchDate = this.wfy.format('yyyy-MM-dd', new Date());
			// this.searchEmpList();
			this.searchData()
		},
		methods: {
			searchEmpList() {
				this.$api.user.getDeptEmpList({

				}).then((res) => {
					this.personList = [];
					res.forEach((item) => {
						this.personList.push({
							value: item.id,
							label: item.empName
						})
					})
				})
			},
			searchData() {
				
				this.$api.user.getEmpPerf({
					begDate: this.wfy.getMonthStartDate(),
					status: "全部"
				}).then((res) => {
					console.log("res业绩",res);
					this.compPerfList = res.filter((item,idx) => {
						return idx < 2
					});
				})
				this.$api.user.getCustTraceInfo({
					traceTime: this.wfy.getMonthStartDate()
				}).then((res) => {
					console.log("res近期",res);
					this.jqghList = res
					this.$forceUpdate()
				})
				this.$api.user.getOppo({
					current: 1,
					size: 2,
					busiOppoType: "私海"
				}).then((res) => {
					console.log("res私海",res);
					this.grsjList = res.records;
					this.grsjList.forEach((item) => {
						switch (item.cusStatus) {
							case "1":
								item.statusName = "未分配";
								break;
							case "2":
								item.statusName = "跟踪中";
								break;
							case "3":
								item.statusName = "已转化";
								break;
							case "4":
								item.statusName = "已签单";
								break;
						}
					})
					this.$forceUpdate()
				})
				// this.$api.user.getOppo({
				// 	current: 1,
				// 	size: 2,
				// 	busiOppoType: "公海"
				// }).then((res) => {
				// 	console.log("res",res);
				// 	this.ghsjList = res.records;
				// 	this.ghsjList.forEach((item) => {
				// 		switch (item.cusStatus) {
				// 			case "1":
				// 				item.statusName = "未分配";
				// 				break;
				// 			case "2":
				// 				item.statusName = "跟踪中";
				// 				break;
				// 			case "3":
				// 				item.statusName = "已转化";
				// 				break;
				// 			case "4":
				// 				item.statusName = "已签单";
				// 				break;
				// 		}
				// 	})
				// })
				this.$api.user.getCareTaskList({
					current: 1,
					size: 2,
					careStatus: '0',
					custManId: uni.getStorageSync("THCRMUSERCODE")
				}).then((res) => {
					console.log("res",res);
					this.gzList = res.filter((item,idx) => {
						return idx < 2
					});
					this.$forceUpdate()
				})
				
				this.$api.user.queryCusOppoQuery({}).then((res) => {
					console.log("res",res);
					this.chartData = {};
					let data = []
					res.forEach((item) => {
						data.push({
							"name": item.status,
							"centerText": item.cusNums,
							"value": item.cusNums
						})
						
					})
					this.$nextTick(() => {
						this.chartData = {
							series: [{
								data: data
							}]
						}
					})
				})
			},
			openMore(el,index) {
				if(index === '1'){
					this.moreList = [
						{
							value: '0',
							label: '转到公海'
						},
						{
							value: '1',
							label: '删除'
						},
						// {
						// 	value: '2',
						// 	label: '下订单'
						// },
						{
							value: '3',
							label: '转正式客户'
						}
					]
				}
				if(index === '2'){
					this.moreList = [{
							value: '4',
							label: '前往拜访'
						}
					]
				}
				if(index === '3'){
					this.moreList = [
						{
							value: '5',
							label: '领入私海'
						},
						// {
						// 	value: '6',
						// 	label: '分配人员'
						// }
					]
				}
				this.taskInfo = el;
				this.moreShow = true;
			},
			// 点击标题
			clickTitle(index){
				console.log(index);
				if(index === '1'){
					uni.navigateTo({
						url: '/pages/busi/index-gr'
					});
				}
				if(index === '2'){
					uni.navigateTo({
						url: '/pages/baifang/index'
					});
				}
				if(index === '3'){
					uni.navigateTo({
						url: '/pages/baifang/historay'
					});
				}
				if(index === '4'){
					uni.navigateTo({
						url: '/pages/busi/performance'
					});
				}
			},
			// 点击任务方法
			clickTask(row, index) {
				console.log(row, index)
				// uni.setStorageSync('CRMSomeThing', row);
				// uni.navigateTo({
				// 	url: '/pages/something/something?id=1&name=uniapp'
				// });
				if(index === '1' || index === '3'){
					uni.setStorageSync('OppoDetail', row);
					uni.navigateTo({
						url: '/pages/busi/busi-detail?mode=detail'
					})
				}
				// if(index === '2'){
				// 	uni.navigateTo({
				// 		url: '/pages/busi/progress?crmBusiOppo=' + row.id
				// 	})
				// }
			},
			selectMoreConfirm(res) {
				console.log("res", res);
				// this.ctrlType = res[0].value;
				// this.personShow = true;
				if(res[0].value === '0'){
					this.zghFun(this.taskInfo)
				}
				if(res[0].value === '1'){
					this.sjDelete(this.taskInfo)
				}
				if(res[0].value === '3'){
					this.zzsFun(this.taskInfo)
				}
				if(res[0].value === '4'){
					uni.navigateTo({
						url: '/pages/busi/progress-detail?mode=add'
					});
				}
				if(res[0].value === '5'){
					this.lshFun(this.taskInfo)
				}
			},
			lshFun(item){
				this.$api.user.getPrivateBusiOppo(item).then((res) => {
					console.log("res",res);
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					this.searchData()
				})
			},
			zghFun(item){
				this.$api.user.retunPublicBusiOppo(item).then((res) => {
					console.log("res",res);
					uni.showToast({
						title: '转移成功',
						icon: 'success'
					})
					this.searchData()
				})
			},
			zzsFun(item){
				this.$api.user.genCustInfo(item).then((res) => {
					console.log("res",res);
					uni.showToast({
						title: '转正式客户成功',
						icon: 'success'
					})
					this.searchData()
				})
			},
			sjDelete(item){
				// if(item.cusStatus !== '1'){
				// 	uni.showToast({
				// 		title: '商机已分配，无法删除',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.$api.user.deleteOppo(item.id).then((res) => {
					console.log("res",res);
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					this.searchData()
				})
			},
			selectPersonConfirm(res) {
				console.log("res", res);
				console.log("this.ctrlType", this.ctrlType);
				if (this.ctrlType === "转办") {
					this.$api.user.transferOffice({
						crmPlanDayWorkId: this.taskInfo.id,
						userIdDest: res[0].value
					}).then((res) => {
						uni.showToast({
							title: '转办完成',
							duration: 2000,
							icon: "none",
							success: () => {
								this.searchData()
							}
						});
					})
				}
				if (this.ctrlType === "协办") {
					this.$api.user.copyOffice({
						crmPlanDayWorkId: this.taskInfo.id,
						userIdDest: res[0].value
					}).then((res) => {
						uni.showToast({
							title: '协办完成',
							duration: 2000,
							icon: "none",
							success: () => {
								this.searchData()
							}
						});
					})
				}
			},
			selectConfirm(res) {
				console.log("res", res);
				if (res[0].value === "新建事项") {
					uni.navigateTo({
						url: '/pages/something/new-something?id=1&name=uniapp'
					});
				}
				if (res[0].value === "下单") {
					uni.navigateTo({
						url: '/pages/order/order?id=1&name=uniapp'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		height: 100rpx;
		margin-top: var(--status-bar-height);

		.right {
			width: 20%;
		}

		.center {
			width: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 40rpx;
		}

		.left {
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2b85e4;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.content {
		height: 100vh;
		overflow-y: scroll;

	}

	.calendar {
		height: calc(100vh - 900rpx - var(--status-bar-height));
		overflow-y: scroll;
	}

	::v-deep .date-top {
		padding: 0 !important;
	}

	.calendar-box {
		height: 750rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.border-right {
			border-right: 2rpx solid #cccccc;
		}

		.item {
			height: 50%;
			padding: 10rpx;
			width: 50%;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

			}

			.tr {
				justify-content: flex-end;
			}

			.sale {
				color: #2b85e4;
			}

			.gz {
				color: #EE6666;
			}

			.xm {
				color: #19be6b;
			}

			.other {
				color: #FAC858;
			}

			.item-item {
				font-size: 30rpx;
				text-align: center;
				height: 140rpx;
				border-bottom: 2rpx solid #cccccc;
				padding: 10rpx 0;

				.child-item-title {
					font-size: 26rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					font-weight: bold;
					width: 100%;
					.label{
						min-width: calc(100% - 160rpx);
						text-align: left;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.type{
						width: 160rpx;
						text-align: right;
					}
				}

				.child-item-content {
					font-size: 26rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;

					.child-item-progress {
						font-weight: bold;
					}
					.left{
						min-width: 60%;
						text-align: left;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.right{
						min-width: 40%;
						text-align: right;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.success {
					color: #19be6b;
				}

				.no-start {
					color: #ff9900;
				}

				.ing {
					color: #2b85e4;
				}
			}

			.item-item-two {
				font-size: 26rpx;
				text-align: right;
				height: 280rpx;
				border-bottom: none;
				padding: 10rpx 0;

				.child-item-content {
					height: 60rpx;
					display: flex;
					align-items: center;
					// font-weight: bold;
				}
			}
		}
	}
</style>